<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="logo">logo</view>
            <searchbox @search="onSearch" />
        </view>

        <view class="content">
            <!-- 子标签栏 -->
            <view class="sub-tabs">
                <view class="sub-tab" :class="{ active: activeSubTab === 'likes' }" @click="switchSubTab('likes')">我的喜欢</view>
                <view class="sub-tab" :class="{ active: activeSubTab === 'collection' }" @click="switchSubTab('collection')">我的收藏</view>
            </view>

            <!-- 我的喜欢内容 -->
            <view v-if="activeSubTab === 'likes'" class="section">
                <view class="song-list" v-if="!loading">
                    <view class="song-item" 
                          v-for="(song, index) in likedSongs" 
                          :key="song.id || index"
                          @click="playSong(song)">
                        <image :src="song.cover_url || song.image || '/static/logo.png'" 
                               class="song-image"></image>
                        <view class="song-info">
                            <text class="song-title">{{song.title}}</text>
                            <text class="song-artist">{{song.artist}}</text>
                        </view>
                        <view class="song-more" @click.stop="showSongMenu(song, 'likes')">
                            <text class="icon">···</text>
                        </view>
                    </view>
                </view>
                <view class="loading" v-if="loading">
                    <text>加载中...</text>
                </view>
            </view>

            <!-- 我的收藏内容 -->
            <view v-if="activeSubTab === 'collection'" class="section">
                <view class="song-list" v-if="!loading">
                    <view class="song-item" 
                          v-for="(song, index) in collectedSongs" 
                          :key="song.id || index"
                          @click="playSong(song)">
                        <image :src="song.cover_url || song.image || '/static/logo.png'" 
                               class="song-image"></image>
                        <view class="song-info">
                            <text class="song-title">{{song.title}}</text>
                            <text class="song-artist">{{song.artist}}</text>
                        </view>
                        <view class="song-more" @click.stop="showSongMenu(song, 'collection')">
                            <text class="icon">···</text>
                        </view>
                    </view>
                </view>
                <view class="loading" v-if="loading">
                    <text>加载中...</text>
                </view>
            </view>

        </view>

        <!-- 音乐播放器 -->
        <music-player 
            :song="currentSong" 
            @previous="previousSong"
            @next="nextSong"
            @add-to-playlist="addToPlaylist"
            @share="shareSong"
            @download="downloadSong"
            @show-lyrics="showLyrics"
        />
    </view>
</template>

<script>
import SearchBox from '@/components/searchbox/searchbox.vue'
import MusicPlayer from '@/components/music-player/music-player.vue'

export default {
    components: {
        SearchBox,
        MusicPlayer
    },
    data() {
        return {
            title: '我的喜欢',
            activeSubTab: 'likes',
            currentSong: null,
            loading: false,
            userId: 'user_001',
            likedSongs: [
                {
                    title: '夜空中最亮的星',
                    artist: '逃跑计划',
                    image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg'
                },
                {
                    title: '海阔天空',
                    artist: 'Beyond',
                    image: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg'
                },
                {
                    title: '起风了',
                    artist: '买辣椒也用券',
                    image: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg'
                },
                {
                    title: '稻香',
                    artist: '周杰伦',
                    image: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg'
                }
            ],
            collectedSongs: [],
            recommendedPlaylists: [
                {
                    title: '你可能喜欢的民谣',
                    info: '根据你的口味推荐',
                    image: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg',
                    songs: [
                        {
                            title: '成都',
                            artist: '赵雷',
                            image: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg'
                        },
                        {
                            title: '南方姑娘',
                            artist: '赵雷',
                            image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg'
                        },
                        {
                            title: '理想三旬',
                            artist: '陈鸿宇',
                            image: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg'
                        }
                    ]
                },
                {
                    title: '流行热歌推荐',
                    info: '最近热门',
                    image: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg',
                    songs: [
                        {
                            title: '起风了',
                            artist: '买辣椒也用券',
                            image: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg'
                        },
                        {
                            title: '夜空中最亮的星',
                            artist: '逃跑计划',
                            image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg'
                        },
                        {
                            title: '稻香',
                            artist: '周杰伦',
                            image: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg'
                        }
                    ]
                },
                {
                    title: '经典摇滚合集',
                    info: '根据你的收藏推荐',
                    image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg',
                    songs: [
                        {
                            title: '海阔天空',
                            artist: 'Beyond',
                            image: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg'
                        },
                        {
                            title: '无地自容',
                            artist: '黑豹乐队',
                            image: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg'
                        },
                        {
                            title: 'Don\'t Cry',
                            artist: 'Guns N\' Roses',
                            image: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg'
                        }
                    ]
                },
                {
                    title: '轻松午后',
                    info: '适合工作时听的音乐',
                    image: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg',
                    songs: [
                        {
                            title: '晴天',
                            artist: '周杰伦',
                            image: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg'
                        },
                        {
                            title: '七里香',
                            artist: '周杰伦',
                            image: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg'
                        },
                        {
                            title: '简单爱',
                            artist: '周杰伦',
                            image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg'
                        }
                    ]
                }
            ],
            historySongs: [
                {
                    title: '起风了',
                    artist: '买辣椒也用券',
                    image: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg'
                },
                {
                    title: '海阔天空',
                    artist: 'Beyond',
                    image: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg'
                },
                {
                    title: '夜空中最亮的星',
                    artist: '逃跑计划',
                    image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg'
                }
            ]
        }
    },
    onLoad() {
        this.loadFavorites();
    },
    onShow() {
        // 每次显示页面时重新加载数据
        this.loadFavorites();
    },
    methods: {
        switchSubTab(tab) {
            this.activeSubTab = tab;
        },
        navigateToIndex() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },
        onSearch(keyword) {
            if (keyword.trim()) {
                this.searchFavorites(keyword);
            }
        },
        
        // 加载收藏列表
        loadFavorites() {
            this.loading = true;
            
            // 从本地存储加载喜欢和收藏列表
            this.likedSongs = uni.getStorageSync('likedSongs') || [];
            this.collectedSongs = uni.getStorageSync('collectedSongs') || [];
            
            // 加载播放历史
            const playHistory = uni.getStorageSync('playHistory') || [];
            this.historySongs = playHistory;
            
            this.loading = false;
        },
        
        // 搜索收藏
        searchFavorites(keyword) {
            this.loading = true;
            const filteredSongs = this.likedSongs.filter(song => 
                song.title.includes(keyword) || song.artist.includes(keyword)
            );
            this.likedSongs = filteredSongs;
            uni.showToast({
                title: `找到 ${filteredSongs.length} 首收藏歌曲`,
                icon: 'none'
            });
            this.loading = false;
        },
        
        // 播放歌曲
        playSong(song) {
            this.currentSong = song;
            this.recordPlayHistory(song.id);
        },
        
        // 记录播放历史
        recordPlayHistory(songId) {
            // 本地记录播放历史
            const song = this.likedSongs.find(s => s.id === songId) || 
                        this.recommendedPlaylists.flatMap(p => p.songs).find(s => s.id === songId);
            if (song) {
                this.historySongs.unshift(song);
                if (this.historySongs.length > 50) {
                    this.historySongs.pop();
                }
            }
        },
        
        // 上一首
        previousSong() {
            const currentIndex = this.likedSongs.findIndex(song => song.id === this.currentSong.id);
            const prevIndex = currentIndex > 0 ? currentIndex - 1 : this.likedSongs.length - 1;
            this.playSong(this.likedSongs[prevIndex]);
        },
        
        // 下一首
        nextSong() {
            const currentIndex = this.likedSongs.findIndex(song => song.id === this.currentSong.id);
            const nextIndex = currentIndex < this.likedSongs.length - 1 ? currentIndex + 1 : 0;
            this.playSong(this.likedSongs[nextIndex]);
        },
        
        // 添加到播放列表
        addToPlaylist(song) {
            uni.showToast({
                title: '添加到播放列表功能待实现',
                icon: 'none'
            });
        },
        
        // 分享歌曲
        shareSong(song) {
            uni.showToast({
                title: '分享功能待实现',
                icon: 'none'
            });
        },
        
        // 下载歌曲
        downloadSong(song) {
            uni.showToast({
                title: '下载功能待实现',
                icon: 'none'
            });
        },
        
        // 显示歌词
        showLyrics(song) {
            uni.showToast({
                title: '歌词功能待实现',
                icon: 'none'
            });
        },
        
        // 显示歌曲菜单
        showSongMenu(song, type) {
            const itemList = type === 'likes' ? ['取消喜欢', '查看详情'] : ['取消收藏', '查看详情'];
            uni.showActionSheet({
                itemList: itemList,
                success: (res) => {
                    switch (res.tapIndex) {
                        case 0:
                            if (type === 'likes') {
                                this.removeFromLikes(song);
                            } else {
                                this.removeFromCollection(song);
                            }
                            break;
                        case 1:
                            this.showSongDetail(song);
                            break;
                    }
                }
            });
        },
        
        // 取消喜欢
        removeFromLikes(song) {
            this.likedSongs = this.likedSongs.filter(s => s.id !== song.id);
            // 同步到本地存储
            uni.setStorageSync('likedSongs', this.likedSongs);
            uni.showToast({
                title: '已取消喜欢',
                icon: 'success'
            });
        },
        
        // 取消收藏
        removeFromCollection(song) {
            this.collectedSongs = this.collectedSongs.filter(s => s.id !== song.id);
            // 同步到本地存储
            uni.setStorageSync('collectedSongs', this.collectedSongs);
            uni.showToast({
                title: '已取消收藏',
                icon: 'success'
            });
        },
        
        // 显示歌曲详情
        showSongDetail(song) {
            uni.showModal({
                title: song.title,
                content: `艺术家: ${song.artist}\n时长: ${song.duration || '未知'}`,
                showCancel: false
            });
        },
        
        // 显示歌单详情（跳转到新页面）
        showPlaylistDetail(playlist) {
            console.log('尝试跳转到歌单:', playlist.title);
            uni.navigateTo({
                url: `/pages/playlistDetail/playlistDetail?playlist=${encodeURIComponent(JSON.stringify(playlist))}`,
                success: () => console.log('跳转成功'),
                fail: (err) => console.error('跳转失败:', err)
            });
        }
    }
}
</script>

<style>
.container {
    background: linear-gradient(180deg, #e8eaf6 0%, #f3e5f5 50%, #fce4ec 100%);
    min-height: 100vh;
    position: relative;
}

/* 顶部导航栏 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 50;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
}

.logo {
    font-size: 40rpx;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 2rpx;
}


/* 内容区域 */
.content {
    margin-top: 100rpx;
    margin-bottom: 120rpx;
    padding: 0 30rpx;
    min-height: 100vh;
}

/* 标签栏 */
.tabs {
    display: flex;
    padding: 20rpx 0;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 15rpx 0;
    font-size: 28rpx;
    color: #888888;
}

.tab.active {
    color: #7C4DFF;
    border-bottom: 4rpx solid #7C4DFF;
}

/* 子标签栏 */
.sub-tabs {
    display: flex;
    padding: 30rpx 0 20rpx 0;
    margin-bottom: 24rpx;
    gap: 20rpx;
}

.sub-tab {
    padding: 16rpx 32rpx;
    font-size: 28rpx;
    color: #95a5a6;
    border-radius: 50rpx;
    transition: all 0.3s ease;
    background: #ffffff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.sub-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: bold;
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}

/* 区块通用样式 */
.section {
    margin-bottom: 40rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
    display: block;
}

/* 推荐歌单 */
.playlist-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.playlist-card {
    width: 48%;
    background: linear-gradient(45deg, rgba(124, 77, 255, 0.1), rgba(179, 136, 255, 0.1));
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.playlist-image {
    width: 100%;
    height: 280rpx;
    border-radius: 12rpx;
    margin-bottom: 10rpx;
}

.playlist-title {
    font-size: 26rpx;
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-info {
    font-size: 22rpx;
    color: #888888;
    display: block;
}

/* 最近播放 */
.song-list {
    display: flex;
    flex-direction: column;
}

.song-item {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fe 100%);
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.song-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.song-item:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.25);
}

.song-item:active::before {
    opacity: 1;
}

.song-image {
    width: 110rpx;
    height: 110rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.song-info {
    flex: 1;
    position: relative;
    z-index: 1;
}

.song-title {
    font-size: 30rpx;
    font-weight: bold;
    display: block;
    color: #2c3e50;
    margin-bottom: 8rpx;
}

.song-artist {
    font-size: 24rpx;
    color: #95a5a6;
    display: block;
}

.song-more {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* 底部播放栏 */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #eeeeee;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
}

.player-image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    margin-right: 20rpx;
}

.player-info {
    flex: 1;
}

.player-title {
    font-size: 28rpx;
    font-weight: 500;
    display: block;
}

.player-artist {
    font-size: 24rpx;
    color: #888888;
    display: block;
}

.player-controls {
    display: flex;
    align-items: center;
}

.icon {
    font-size: 40rpx;
    color: #888888;
    margin-left: 30rpx;
}

.play-icon {
    color: #7C4DFF;
}

/* 加载状态 */
.loading {
    text-align: center;
    padding: 40rpx 0;
    color: #888888;
    font-size: 28rpx;
}

/* 歌曲列表项点击效果 */
.song-item:active {
    background-color: #f5f5f5;
}

/* 歌曲更多按钮 */
.song-more {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.song-more:active {
    background-color: #eeeeee;
}
</style>